<template>
  <ag-popup
    v-model="visible"
    :title="dynamicTitle"
    class="service-info-config"
    @onCancel="onCancel"
  >
    <div class="input-block">
      <span>名称</span>
      <el-input
        placeholder=""
        v-model="currentForm.name"
        @change="onInputChange"
      ></el-input>
    </div>
    <!-- <div class="input-block">
      <span>模型ID</span>
      <el-input
        placeholder=""
        v-model="currentForm.bimid"
        @change="onInputChange"
      ></el-input>
    </div> -->
     <div class="input-block">
      <span>建筑ID</span>
      <el-input
        placeholder=""
        v-model="currentForm.bldg_id"
        @change="onInputChange"
      ></el-input>
    </div>
    <div class="input-block">
      <span>服务地址</span>
      <el-input
        placeholder=""
        v-model="currentForm.path"
        @change="onInputChange"
      ></el-input>
    </div>
    <div class="input-block">
      <span>备注</span>
      <el-input
        placeholder=""
        v-model="currentForm.remark"
        @change="onInputChange"
      ></el-input>
    </div>
    <div class="button-group">
      <el-button size="small" @click="onCancel">取消</el-button>
      <el-button size="small" :disabled="isButtonDisable" type="primary" @click="save"
        >保存</el-button
      >
    </div>
  </ag-popup>
</template>

<script>
import AgPopup from "@/views/components/precut/AgPopup.vue";

export default {
  components: {
    "ag-popup": AgPopup,
  },
  data() {
    return {
      dynamicTitle: "Service information",
      visible: false,
      currentForm: {
        id:"",
        name: "",
        // bimid:"",
        path: "",
        remark: "",
        bldg_id: "",
      },
      isButtonDisable: true,
    };
  },
  methods: {
    //监听输入变化的内容,如果有变化保存按钮可用
    onInputChange() {
      let _this = this;
      _this.isButtonDisable = !(
        _this.currentForm.name.trim() &&
        _this.currentForm.path.trim() &&
        _this.currentForm.bldg_id.trim()
      );
    },
    //保存，调用父组件的方法
    save() {
      let _this = this;
      _this.$emit("save", _this.currentForm);
      _this.onCancel();
    },
    //添加数据时的弹框标题
    addData(title) {
      let _this = this;
      _this.visible = true;
      _this.dynamicTitle = title;
    },
    //更新数据时的弹框标题及一行记录
    updateData(title, record) {
      let _this = this;
      _this.visible = true;
      _this.isButtonDisable = false;
      _this.dynamicTitle = title;
      _this.currentForm = record;
    },
    //取消操作，关闭弹框
    onCancel() {
      let _this = this;
      _this.visible = false;
      _this.isButtonDisable = true;
      _this.currentForm = {
        name: "",
        // bimid:"",
        path: "",
        remark: "",
        bldg_id: "",
      };
    },
  },
};
</script>
<style scoped>
.service-info-config {
  width: 300px;
}

.input-block {
  margin: 10px;
}

.button-group {
  text-align: center;
  margin: 10px 5px;
}
</style>
